<template>
  <div class="form-container">
    <h3 class="custom-title">基本信息</h3>
    <van-form @submit="onSubmit">
      <!-- 证件号码 -->
      <van-field
        v-model="id_num"
        :disabled="mode === 1"
        name="证件号码"
        label="证件号码"
        placeholder="请输入证件号码"
        :rules="[{ required: true, message: '请填写证件号码' }]"
      />
      <!-- 证件类型 -->
      <van-field
        readonly
        clickable
        name="picker"
        :value="document_type"
        label="证件类型"
        placeholder="点击选择证件类型"
        @click="document_type_picker = true"
      />
      <van-popup v-model="document_type_picker" position="bottom">
        <van-picker
          show-toolbar
          :columns="document_type_columns"
          @cancel="document_type_picker = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <!-- 姓名 -->
      <van-field
        v-model="username"
        name="姓名"
        label="姓名"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <!-- 性别 -->
      <van-field
        readonly
        clickable
        name="picker"
        :value="gender"
        label="性别"
        placeholder="请选择性别"
        @click="gender_picker = true"
      />
      <van-popup v-model="gender_picker" position="bottom">
        <van-picker
          show-toolbar
          :columns="gender_columns"
          @confirm="onConfirm"
          @cancel="gender_picker = false"
        />
      </van-popup>
      <!-- 手机号码 -->
      <van-field
        v-model="tel"
        type="tel"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <!-- 户籍地址 -->
      <van-field
        v-model="registerPlace"
        is-link
        readonly
        label="户籍地址"
        placeholder="请选择户籍地址"
        @click="register_picker = true"
      />
      <van-popup v-model="register_picker" round position="bottom">
        <van-cascader
          title="请选择所在地区"
          :options="registerPlace_column"
          @close="register_picker = false"
          @finish="onFinish"
        />
      </van-popup>

      <!-- 实际居住地址 -->
      <van-field
        v-model="realPlace"
        is-link
        readonly
        label="实际居住地址"
        placeholder="请选择实际居住地址"
        @click="realPlace_picker = true"
      />
      <van-popup v-model="realPlace_picker" round position="bottom">
        <van-cascader
          title="请选择所在地区"
          :options="realPlace_column"
          @close="realPlace_picker = false"
          @finish="onClose"
        />
      </van-popup>

      <!-- 出生日期 -->
      <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="born_date"
        label="出生日期"
        placeholder="点击选择出生日期"
        @click="born_date_picker = true"
      />
      <van-popup v-model="born_date_picker" position="bottom">
        <van-datetime-picker
          type="date"
          @confirm="
            (value) =>
              onConfirm({
                value,
                type: 'date',
              })
          "
          @cancel="born_date_picker = false"
        />
      </van-popup>

      <!-- 民族 -->
      <van-field
        readonly
        clickable
        name="picker"
        :value="family"
        label="民族"
        placeholder="请选择民族"
        @click="family_picker = true"
      />
      <van-popup v-model="family_picker" position="bottom">
        <van-picker
          show-toolbar
          :columns="family_columns"
          @confirm="onConfirm"
          @cancel="family_picker = false"
        />
      </van-popup>

      <!-- 所属网格 -->
      <van-field
        readonly
        clickable
        name="picker"
        :value="grid"
        label="所属网格"
        placeholder="请选择网格"
        @click="grid_picker = true"
      />
      <van-popup v-model="grid_picker" position="bottom">
        <van-picker
          show-toolbar
          :columns="grid_columns"
          @confirm="onConfirm"
          @cancel="grid_picker = false"
        />
      </van-popup>

      <!-- 所属村社 -->
      <van-field
        readonly
        clickable
        name="picker"
        :value="village"
        label="所属村社"
        placeholder="请选择村社"
        @click="village_picker = true"
      />
      <van-popup v-model="village_picker" position="bottom">
        <van-picker
          show-toolbar
          :columns="village_columns"
          @confirm="onConfirm"
          @cancel="village_picker = false"
        />
      </van-popup>

      <!-- 所属防区 -->
      <van-field
        readonly
        clickable
        name="picker"
        :value="place"
        label="所属防区"
        placeholder="请选择防区"
        @click="place_picker = true"
      />
      <van-popup v-model="place_picker" position="bottom">
        <van-picker
          show-toolbar
          :columns="place_columns"
          @confirm="onConfirm"
          @cancel="place_picker = false"
        />
      </van-popup>

      <van-field name="uploader" label="图片">
        <template #input>
          <van-uploader v-model="uploader" />
        </template>
      </van-field>
    </van-form>
    <!-- 户籍信息 -->
    <h3 class="custom-title">户籍信息</h3>
     <van-form>
       <!-- 户籍地 -->
       <van-field
        v-model="hujidi"
        name="户籍地"
        label="户籍地"
        placeholder="请输入户籍地"
        :rules="[{ required: true, message: '请输入户籍地' }]"
      />
      <!-- 户籍派出所 -->
       <van-field
        v-model="policeStation"
        name="户籍派出所"
        label="户籍派出所"
        placeholder="请输入户籍派出所"
        :rules="[{ required: true, message: '请输入户籍派出所' }]"
      />
      <!-- 户籍住址 -->
       <van-field
        v-model="registeredResidence"
        name="户籍住址"
        label="户籍住址"
        placeholder="请输入户籍住址"
        :rules="[{ required: true, message: '请输入户籍住址' }]"
      />
      <!-- 与户主关系 -->
       <van-field
        v-model="relationship"
        name="与户主关系"
        label="与户主关系"
        placeholder="请输入与户主关系"
        :rules="[{ required: true, message: '请输入与户主关系' }]"
      />
      <!-- 户主姓名 -->
      <van-field
        v-model="registerName"
        name="户主姓名"
        label="户主姓名"
        placeholder="请输入户主姓名"
        :rules="[{ required: true, message: '请输入户主姓名' }]"
      />
      <!-- 户主身份证号码 -->
      <van-field
        v-model="register_id_card"
        name="户主身份证号码"
        label="户主身份证号码"
        placeholder="请输入户主身份证号码"
        :rules="[{ required: true, message: '请输入户主身份证号码' }]"
      />
      <!-- 户号 -->
      <van-field
        v-model="register_num"
        name="户号"
        label="户号"
        placeholder="请输入户号"
        :rules="[{ required: true, message: '请输入户号' }]"
      />
     </van-form>
    <!-- 工作单位信息 -->
    <h3 class="custom-title">工作单位信息</h3>
    <van-form>
       <van-field
        v-model="job"
        name="职业"
        label="职业"
        placeholder="请输入职业"
        :rules="[{ required: true, message: '请输入职业' }]"
      />
      <van-field
        v-model="workUnit"
        name="工作单位"
        label="工作单位"
        placeholder="请输入工作单位"
        :rules="[{ required: true, message: '请输入工作单位' }]"
      />
      <van-field
        v-model="post"
        name="职务"
        label="职务"
        placeholder="请输入职务"
        :rules="[{ required: true, message: '请输入职务' }]"
      />
       <van-field
        v-model="leader"
        name="单位负责人"
        label="单位负责人"
        placeholder="请输入单位负责人"
        :rules="[{ required: true, message: '请输入单位负责人' }]"
      />
      <van-field
        v-model="address"
        name="单位地址"
        label="单位地址"
        placeholder="请输入单位地址"
        :rules="[{ required: true, message: '请输入单位地址' }]"
      />
      <van-field
        v-model="unitTel"
        name="单位联系电话"
        label="单位联系电话"
        placeholder="请输入单位联系电话"
        :rules="[{ required: true, message: '请输入单位联系电话' }]"
      />
    </van-form>
    <!-- 更多信息 -->
     <h3 class="custom-title">更多信息</h3>
     <van-form>
        <van-field
        v-model="height"
        name="身高"
        label="身高"
        placeholder="请输入身高"
        :rules="[{ required: true, message: '请输入身高' }]"
      />
      <van-field
        v-model="bloodType"
        name="血型"
        label="血型"
        placeholder="请输入血型"
        :rules="[{ required: true, message: '请输入血型' }]"
      />
      <van-field
        v-model="education"
        name="文化程度"
        label="文化程度"
        placeholder="请输入文化程度"
        :rules="[{ required: true, message: '请输入文化程度' }]"
      />

      <van-field
        v-model="military"
        name="兵役情况"
        label="兵役情况"
        placeholder="请输入兵役情况"
        :rules="[{ required: true, message: '请输入兵役情况' }]"
      />
      <van-field
        v-model="nativePlace"
        name="籍贯"
        label="籍贯"
        placeholder="请输入籍贯"
        :rules="[{ required: true, message: '请输入籍贯' }]"
      />
      <van-field
        v-model="marital"
        name="婚姻情况"
        label="婚姻情况"
        placeholder="请输入婚姻情况"
        :rules="[{ required: true, message: '请输入婚姻情况' }]"
      />
      <van-field
        v-model="politicalOutlook"
        name="政治面貌"
        label="政治面貌"
        placeholder="请输入政治面貌"
        :rules="[{ required: true, message: '请输入政治面貌' }]"
      />
      <van-field
        v-model="religiousBelief"
        name="宗教信仰"
        label="宗教信仰"
        placeholder="请输入宗教信仰"
        :rules="[{ required: true, message: '请输入宗教信仰' }]"
      />
      <van-field
        v-model="health"
        name="健康状况"
        label="健康状况"
        placeholder="请输入健康状况"
        :rules="[{ required: true, message: '请输入健康状况' }]"
      />
      <van-field
        v-model="spouseNumber"
        name="配偶证件号码"
        label="配偶证件号码"
        placeholder="请输入配偶证件号码"
        :rules="[{ required: true, message: '请输入配偶证件号码' }]"
      />
     </van-form>

    <!-- 提交按钮 -->
    <div style="margin: 16px">
      <van-button round block type="info" native-type="submit">提交</van-button>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "FormDetials",
  props: {
    detials: {
      type: Object,
      default: () => {},
    },
    mode: {
      type: Number,
      default: () => 0,
    },
  },
  watch: {
    detials: {
      handler(values) {
        console.log(values);
        console.log("watch ok");
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      // 引入moment时间格式化插件
      moment,
      
// 基本信息数据
      // 证件号码
      id_num: "",
      // 姓名
      username: "",
      // 手机号码
      tel: "",
      // 证件类型
      document_type: "",
      // 性别
      gender: "",
      // 出生日期
      born_date: "",
       // 户籍地址
      registerPlace: "",
      // 实际居住地址
      realPlace: "",
     // 所属网格
      grid: "",
      // 所属村社
      village: "",
      // 所属防区
      place: "",

// 户籍信息数据
      // 民族
      family: "",
      // 户籍地
      hujidi:'',
       //   户籍派出所
      policeStation: "",
       // 户籍住址
      registeredResidence: "",
      // 与户主关系
      relationship:'',
      // 户主姓名
      registerName:'',
      // 户主身份证号码
      register_id_card:'',
      // 户号
      register_num:'',

// 工作单位信息数据
      // 职业
      job:'',
      // 工作单位
      workUnit:'',
      // 职务
      post:'',
      // 单位负责人
      leader:'',
      // 单位地址
      address:'',
      // 单位联系电话
      unitTel:'',


// 更多信息数据
      // 身高
      height:'',
      // 血型
      bloodType:'',
      // 文化程度
      education:'',
      // 兵役情况
      military:'',
      // 籍贯
      nativePlace:'',
      // 婚姻情况
      marital:'',
      // 政治面貌
      politicalOutlook:'',
      // 宗教信仰
      religiousBelief:'',
      // 健康状况
      health:'',
      // 配偶证件号码
      spouseNumber:'',


       // 是否显示证件类型选择器
      document_type_picker: false,
      // 是否显示性别选择器
      gender_picker: false,
      // 是否显示民族选择器
      family_picker: false,
      // 是否显示出生日期选择器
      born_date_picker: false,
      // 是否显示户籍地址选择器
      register_picker: false,
      // 是否显示实际居住地址选择器
      realPlace_picker: false,
      // 是否显示所属村社显示器
      village_picker: false,
      // 是否显示所属网格显示器
      grid_picker: false,
      // 是否显示所属防区显示器
      place_picker: false,

      // 选项列表，children 代表子选项，支持多级嵌套
      // 户籍地址级联
      registerPlace_column: [
        {
          text: "浙江省",
          value: "330000",
          children: [{ text: "杭州市", value: "330100" }],
        },
        {
          text: "江苏省",
          value: "320000",
          children: [{ text: "南京市", value: "320100" }],
        },
      ],
      // 实际居住地址级联
      realPlace_column: [
        {
          text: "安徽省",
          value: "300000",
          children: [{ text: "安庆市", value: "30100" }],
        },
        {
          text: "云南省",
          value: "390000",
          children: [{ text: "丽江市", value: "320100" }],
        },
      ],
      // 性别选项
      gender_columns: [
        {
          text: "未知",
          type: "gender",
        },
        {
          text: "男",
          type: "gender",
        },
        {
          text: "女",
          type: "gender",
        },
        {
          text: "未说明",
          type: "gender",
        },
      ],
      // 民族
      family_columns: [
        {
          text: "汉族",
          type: "family",
        },
        {
          text: "回族",
          type: "family",
        },
        {
          text: "维吾尔族",
          type: "family",
        },
        {
          text: "藏族",
          type: "family",
        },
      ],
      // 网格
      grid_columns: [
        {
          text: "网格一",
          type: "grid",
        },
        {
          text: "网格二",
          type: "grid",
        },
        {
          text: "网格三",
          type: "grid",
        },
      ],
      // 所属防区
      place_columns: [
        {
          text: "防区一",
          type: "place",
        },
        {
          text: "防区二",
          type: "place",
        },
        {
          text: "防区三",
          type: "place",
        },
      ],
      // 所属村社
      village_columns: [
        {
          text: "村社一",
          type: "village",
        },
        {
          text: "村社二",
          type: "village",
        },
        {
          text: "村社三",
          type: "village",
        },
      ],
      // 证件类型选项
      document_type_columns: [
        {
          text: "身份证",
          type: "document_type",
        },
        {
          text: "居住证",
          type: "document_type",
        },
        {
          text: "签证",
          type: "document_type",
        },
        {
          text: "护照",
          type: "document_type",
        },
        {
          text: "军人证",
          type: "document_type",
        },
        {
          text: "港澳通行证",
          type: "document_type",
        },
      ],
      uploader: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
    };
  },
  mounted() {},
  methods: {
    
    onFinish({ selectedOptions }) {
      this.register_picker = false;
      this.registerPlace = selectedOptions
        .map((option) => option.text)
        .join("/");
    },
    onClose({ selectedOptions }) {
      this.realPlace_picker = false;
      this.realPlace = selectedOptions.map((option) => option.text).join("/");
    },

    onSubmit(values) {
      console.log("submit", values);
    },
    // 所有选择器改变事件都在这里处理
    onConfirm(values) {
      console.log(values);
      // type 是每个 columns 里定义的，用于区分当前触发的是什么 select 事件
      // text 是选择器选择的值（注意：时间、日期选择器没有这个值）
      // value 是选择器选择的值（时间、日期选择器点击“确认”，获取到的值）
      const { type, text, value } = values;
      switch (type) {
        // 如果是证件类型选择器改变
        case "document_type":
          this.document_type = text;
          this.document_type_picker = false;
          break;
        // 如果是性别选择器改变
        case "gender":
          this.gender = text;
          this.gender_picker = false;
          break;
        // 如果是时间、日期选择器
        case "date":
          this.born_date = moment(value).format("YYYY-MM-DD");
          this.born_date_picker = false;
          break;
        // 如果是民族
        case "family":
          this.family = text;
          this.family_picker = false;
          break;
        // 如果是网格
        case "grid":
          this.grid = text;
          this.grid_picker = false;
          break;
        // 如果是村社
        case "village":
          this.village = text;
          this.village_picker = false;
          break;
        // 如果是防区
        case "place":
          this.place = text;
          this.place_picker = false;
          break;
      }
    },
  },
};
</script>

<style></style>
